<template>
  <div class="wal-payWay">
    <div class="payWay-header">
      <img :src="imgUrl.list1" alt srcset @click="$back()" />
      <div>支付方式</div>
      <div></div>
    </div>
    <div class="box">
      <section>
        <label for>请输入金额</label>
        <input type="number" placeholder="请输入金额" v-model="money" />
      </section>
      <p>请选择支付方式</p>
    </div>
    <div
      class="payWay-way"
      v-for="(item, index) in dataWay"
      :key="index"
      @click="changeWay(index)"
    >
      <div class="way-left">
        <div class="text">{{ item.text }}</div>
        <img :src="item.icon" alt srcset />
      </div>
      <img :src="item.status ? imgUrl.list4 : imgUrl.list5" alt srcset />
    </div>
    <div class="payTrue">
      <div class="payTrue-cont" @click="payment()">确认支付</div>
    </div>
  </div>
</template>

<script>
// import wx from 'weixin-js-sdk'
export default {
  data() {
    return {
      imgUrl: {
        list1: require('../../../static/images/insert/Back.png'),
        list4: require('../../../static/images/insert/select2.png'),
        list5: require('../../../static/images/insert/noSelect.png')
      },
      dataWay: [
        {
          text: '支付宝',
          icon: require('../../../static/images/insert/zhifubao.png'),
          status: true
        },
        {
          text: '微信',
          icon: require('../../../static/images/insert/weixin.png'),
          status: false
        }
      ],
      money: null,
      weixin: null
    }
  },
  methods: {
    changeWay(reti) {
      let dataWayDX = this.dataWay
      dataWayDX.forEach((item, index) => {
        reti == index ? (item.status = true) : (item.status = false)
      })
      this.dataWay = dataWayDX
    },
    payment() {
      if (this.money == null || this.money == 0) {
        alert('请输入金额')
        return false
      }
      let dataWayDX = this.dataWay
      let indexs
      dataWayDX.forEach((item, index) => {
        if (item.status == true) {
          indexs = index
        }
      })
      if (indexs === 1) {
        this.weChatPay()
      } else {
        this.alipayPay()
      }
    },
    /*
    handelPay() {
      if (this.wechatpayType == 'wxpay') {
        console.log("微信内支付")
       
        this.$http.insideWeChatPay(data).then(res => {
          if (res.data.code === 200) {
            this.weChatParameter = res.data.data
            // console.log(this.weChatParameter,"微信内支付需要参数")
            this.weixinPay()
          } else {
            Toast({
              message: res.data.msg,
              position: 'middle',
              duration: 1000
            });
          }
        });
      } else if (this.wechatpayType == 'wxpay_php') {
        console.log("微信外支付")
       
        this.$http.outsideWeChatPay(data).then(res => {
          if (res.data.code === 200) {
            let url = res.data.data
            window.location.replace(url)   //这里是后端返回的URL直接进行跳转即可完成微信外支付
          } else {
            Toast({
              message: res.data.msg,
              position: 'middle',
              duration: 1000
            });
          }
        });
      }
    },*/
    weChatPay() {
      // console.log('微信支付')
      this.$axios({
        method: 'post',
        url: 'Needloginaction/orderCreate',
        data: {
          money: this.money,
          payment_platform: 1,
          token: sessionStorage.token
        }
      })
        .then(res => {
          if (res.data.code === 1) {
            // console.log(res)
            sessionStorage.setItem('weChatPay', res.data.data.order_sn)
            window.location.href = res.data.data.result
          } else {
            alert(res.data.msg)
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    alipayPay() {
      // console.log('支付宝支付')
      this.$axios({
        method: 'post',
        url: 'Needloginaction/orderCreate',
        data: {
          money: this.money,
          payment_platform: 2,
          token: sessionStorage.token
        }
      })
        .then(res => {
          if (res.data.code === 200) {
            console.log(res)
            let html = res.data.data.result
            const div = document.createElement('div')
            div.innerHTML = html
            document.body.appendChild(div)
            document.forms.alipaysubmit.submit()
          } else {
            alert(res.data.msg)
          }
        })
        .catch(error => {
          console.log(error)
        })
    }
    /*
    //调用微信支付模块   WeixinJSBridge 这个是在微信客户端浏览器才会有的对象
    onBridgeReady(json) {
      // console.log(json);
      // return;
      
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
        "appId": json.appid,                     //公众号名称，由商户传入
        "timeStamp": json.out_trade_no,             //时间戳，自1970年以来的秒数
        "nonceStr": json.nonce_str,               //随机串
        "package": json.package,
        "signType": json.trade_type,                       //微信签名方式:
        "paySign": json.sign                   //微信签名
      },
        function (res) {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            alert('支付成功,请稍后查询,正在保存订票信息，如有疑问,请联系管理员..')
            // 提交用户数据到数据库操作...
            location.href = "/Home/MyTicket";
            //不要在这里提交最后的数据到数据库，这里可能不正常（微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。）
          }
          else {
            console.log('关闭了微信支付')
          }
        });
    }*/
  },
  created() {
    // this.is_weixn()
    // this.fetchGetsignpackageAction()
  }
}
</script>
<style lang="scss" scoped>
.text {
  width: 1.33rem;
}

.wal-payWay {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  .box {
    width: 9.01rem;
    height: 1.92rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;

    p {
      font-family: 'PingFang-SC-Regular';
      font-size: 0.32rem;
      font-weight: bold;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #666666;
      padding: 0rem 0.31rem;
      box-sizing: border-box;
    }

    section {
      padding: 0rem 0.31rem;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      height: 1rem;
      border-bottom: 0.01rem solid rgba($color: #000000, $alpha: 0.13);

      label {
        font-family: 'PingFang-SC-Regular';
        font-size: 0.44rem;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #303030;
      }

      input {
        font-family: 'PingFang-SC-Regular';
        font-size: 0.4rem;
        font-weight: 500;
        letter-spacing: 0px;
        color: #999999;
        text-align: right;
      }
    }
  }

  & > .payWay-header {
    margin-top: 0.346667rem;
    width: 100%;
    height: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    // border-bottom: 1px solid #ececec;
    & > img {
      padding: 0.32rem;
      width: 0.333333rem;
      height: 0.56rem;
    }
    & > div {
      font-size: 0.44rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #000000;
    }
  }
  & > .payWay-way {
    width: 9.013333rem;
    height: 1.546667rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.013333rem solid #ececec;
    & > .way-left {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      & > div {
        margin: 0 0.32rem;
        font-size: 0.44rem;
        font-weight: bold;
        font-stretch: normal;
        line-height: 0.666667rem;
        letter-spacing: 0rem;
        color: #303030;
      }
      & > img {
        width: 0.666667rem;
        height: 0.666667rem;
      }
    }
    & > img {
      margin-right: 0.32rem;
      width: 0.466667rem;
      height: 0.466667rem;
    }
  }
  & > .payTrue {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.546667rem;
    border-top: 0.013333rem solid #ececec;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    & > .payTrue-cont {
      width: 8.533333rem;
      height: 0.813333rem;
      background-color: #323232;
      border-radius: 0.386667rem;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      font-size: 0.44rem;
      font-weight: normal;
      font-stretch: normal;
      // line-height: 33px;
      letter-spacing: 0rem;
      color: #ffffff;
    }
  }
}
</style>
